<template>
  <van-nav-bar title="我的" />
  <div style="height: 50px"></div>
  <van-cell is-link @click="showPopup" />
  <van-popup
    v-model:show="show"
    position="left"
    :style="{ width: '20%', height: '100%' }"
  >
    <van-sidebar>
      <h2>更多</h2>
      <van-sidebar-item title="购物车" />
      <van-sidebar-item title="订单" @click="dianji" />
      <van-sidebar-item title="卡片" />
      <van-sidebar-item title="设置" />
      <van-sidebar-item title="朋友" />
      <van-sidebar-item title="草搞" />
    </van-sidebar>
  </van-popup>
  <van-image
    round
    width="10rem"
    height="10rem"
    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  />
  <div>
      <div>
        名字:{{ store.mydta.username}}
      </div>
      <div>
        手机号:{{store.mydta.userphon}}
      </div>
  </div>


  <!-- 优惠券单元格 -->
<van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup
  v-model:show="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>
</template>

<script setup>
import { useCounterStore } from '@/store/my'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
let router = new useRouter();

import { ref } from "vue";
import { useRouter } from "vue-router";
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
import { showToast } from "vant";
const dianji = () => {
  let token = localStorage.getItem("token");
  if (!token) {
    showToast({
      type: "fail",
      message: "请先登录",
      onClose() {
        router.push("/login");
      },
    });
  } else {
    router.push("/order");
  }
};
</script>

<style lang="scss" scoped>
</style>